<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>模态标签</title>
    <style>
        .box{
            /*border:1px solid;*/
            width:3000px;
            height:2000px;
            position:relative;
            top:-40px;
            /*display:none;*/
        }

        .bod{
            border:1px solid;
            background-color:white;
            width:400px;
            height:300px;
            position:relative;
   
            padding-top:300px;
        }
        input,b{
            margin-top:30px;
            margin-left:30px;
        }

    </style>
    </head>
<body>
    <h1>模态标签</h1>
    <hr>
  <div class="div">
    <button onclick="jump()">百度一下</button>
    <div class="box" id="box" style="display:none;background-color:none;">
        <div class="bod" id="bod" style="top:40px;left:750px;">
            <b>用户名:</b><input type="text" id = "input1"><br>
            <b>密&nbsp;&nbsp;&nbsp;码:</b><input type="password">
        </div>        
    </div>
  </div>  
    <script>
        function jump(){
            var box = document.getElementById('box');
            box.style.backgroundColor = "rgba(2,2,2,.1)";
            box.style.display = "block";
        }

        bod.onmousedown = function(en){
            var en = en || window.event;
            var bod = document.getElementById('bod');
            // 鼠标当前位置
            var leftM = en.offsetX;
            var topM = en.offsetY;
            // 模态框坐标
            document.onmousemove = function(env){
            // 获取模态框的坐标
            var left = env.clientX;
            var top = env.clientY;
                var env = env || window.event;
                bod.style.left = left-leftM +"px";
                bod.style.top = top-topM +"px";
                console.log(bod.style.left);
            }
            console.log(topM,top);

            box.onclick = function(){
            var box = document.getElementById('box');
            box.style.backgroundColor = "none";
            box.style.display = "none";
        }
        }   

        document.onmouseup = function(){
            document.onmousemove = null;
        }

        // 作业停止



    </script>

</body>
</html>